<template>
	<div class="dialogZ">
		<el-dialog v-model="dialogVisible" width="800" :before-close="hideModal">
			<div style="position: relative; width: 619px; height: 1101.8px; margin: 0 auto" ref="targetRef">
				<img src="/@/assets/lottery/qilecai_logo.png" alt="中国福利彩票" class="logo_bk" />
				<div :class="['lottery-container', 'shuangseqiu']">
					<!-- 顶部 logo 区 -->
					<div class="top-logo">
						<img src="/@/assets/lottery/cwlogo.png" alt="中国福利彩票" class="cw-logo" />
					</div>

					<!-- 期号 -->
					<div class="issue">
						<div class="issue_title">
							第<text style="margin-left: 5px; margin-right: 5px">{{ infoData.drawIssue }}</text
							>期
						</div>
						<div class="issue_title">
							<span>开奖日期:</span>
							<text>{{ infoData.drawTime }}</text>
						</div>
					</div>

					<div class="item_big_title">开奖号码</div>

					<!-- 开奖号码区域 -->
					<div class="lottery-box">
						<div class="numbers">
							<table style="width: 420px">
								<tbody>
									<tr>
										<td colspan="7" class="num_td" style="font-size: 15px">号码</td>
										<td class="num_td" style="font-size: 15px">特别号码</td>
									</tr>
									<tr>
										<td class="num_td" v-for="(item, idx) in infoData.redNumSort?.split(',')" :key="idx">{{ item }}</td>
										<td class="num_td" v-for="(item, idx) in infoData.buleNum?.split(',')" :key="idx">{{ item }}</td>
									</tr>
								</tbody>
							</table>

							<!-- <text v-for="(item, index) in infoData.redNum?.split(',')" :key="index">{{ item }}</text>
						<text style="margin-left: 20px" v-for="(item, index) in infoData.buleNum?.split(',')"
							:key="index">{{ item }}</text> -->
						</div>
					</div>

					<div class="item_big_title">本期销售额</div>

					<!-- 本期销售额 -->
					<div class="sales">
						<!-- <h2>本期销售额：</h2> -->
						<p class="sales-amount">{{ infoData.totalSales }}元</p>
					</div>

					<div class="item_big_title">中奖结果</div>

					<!-- 中奖结果表格 -->
					<div class="prize-result">
						<!-- <h2>中奖结果</h2> -->
						<table style="border-collapse: collapse" class="prize_table" height="20px">
							<tbody>
								<tr>
									<td style="width: 20%" class="table_big_title">奖等</td>
									<td style="width: 46%" class="table_big_title">中奖注数（注）</td>
									<td style="width: 33%" class="table_big_title">中奖金额（元）</td>
								</tr>
								<tr v-for="(item, idx) in infoData.winNoticeDetailsVos" :key="idx">
									<td style="width: 20%" class="table_big_title">{{ prizeList[idx].level }}</td>
									<td style="width: 46%">{{ item.totalNum }}</td>
									<td style="width: 33%">{{ item.bonus }}</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div class="item_big_title">奖池累计金额</div>

					<!-- 下期奖池金额 -->
					<div class="next-prize-pool">
						<!-- <h2>下期一等奖奖池累计金额</h2> -->
						<p class="pool-amount">{{ infoData.balanceMoney }}元</p>
					</div>

					<div class="item_big_title">兑奖期限</div>

					<!-- 兑奖期限 -->
					<div class="claim-deadline">
						<!-- <h2>兑奖期限</h2> -->
						<p>本期兑奖截止日为{{ infoData.endCashTime }}，</p>
						<p>逾期未兑奖视为弃奖，弃奖奖金纳入彩票公益金。</p>
					</div>

					<!-- <div class="big_footer">宁夏福利彩票发行中心</div> -->
				</div>
			</div>

			<template #footer>
				<div class="dialog-footer">
					<el-button type="danger" @click="captureAndDownload"> 生成并下载 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { useRoute, useRouter } from 'vue-router';
import html2canvas from 'html2canvas';

// 中奖结果列表（奖等、注数、金额）
const prizeList = ref([
	{ level: '一等奖', count: 12, amount: 5969509 },
	{ level: '二等奖', count: 136, amount: 106931 },
	{ level: '三等奖', count: 2400, amount: 3000 },
	{ level: '四等奖', count: 99222, amount: 200 },
	{ level: '五等奖', count: 152915, amount: 10 },
	{ level: '六等奖', count: 14206805, amount: 5 },
	{ level: '七等奖', count: 14206805, amount: 5 },
]);
const emit = defineEmits(['handleClose']);

// 引用目标元素
const targetRef = ref(null);

// 截图并下载
const captureAndDownload = async () => {
	if (!targetRef.value) return;

	try {
		// 配置项（重要！）
		const options = {
			scale: 2, // 提高分辨率（默认值为设备像素比）
			useCORS: true, // 允许跨域图片
			backgroundColor: null, // 背景透明（设为 '#fff' 则为白色背景）
			logging: false, // 关闭日志
		};

		// 生成 Canvas
		const canvas = await html2canvas(targetRef.value, options);

		// Canvas 转图片
		const imageUrl = canvas.toDataURL('image/png');

		// 触发下载
		const link = document.createElement('a');
		link.href = imageUrl;
		link.download = `screenshot-${new Date().getTime()}.png`;
		link.click();
	} catch (error) {
		console.error('截图失败:', error);
	}
};

// 页面加载时
onMounted(() => {
	NextLoading.done();
});

const infoData = ref({});
const dialogVisible = ref(false);
async function showModal(item) {
	dialogVisible.value = true;
	if (item) {
		infoData.value = item;
		let arr = [];
		item.winNoticeDetailsVos?.forEach((childItem, childIndex) => {
			if (childIndex <= 20) {
				arr.push(childItem);
			}
		});
		infoData.value.winNoticeDetailsVos = arr;
	}
}

function hideModal() {
	dialogVisible.value = false;
	emit('handleClose');
}

defineExpose({
	hideModal,
	showModal,
});
</script>

<style scoped lang="scss">
@import url('../css.scss');

.dialogZ {
	:deep(.el-overlay) {
		background-color: rgba(141, 141, 141, 0.7);
		backdrop-filter: saturate(180%) blur(3px);
	}
}

.shuangseqiu {
	// background: url('/@/assets/lottery/qilecai_logo.png') no-repeat center top;
}

.qilecai {
	background: url('/@/assets/lottery/qilecai_logo3.png') no-repeat center top;
}

.logo_bk {
	position: absolute;
	top: 0;
	left: 0;
	width: 619px;
	height: 1101.8px;
	z-index: 888;
	margin: 0 auto;
}

.lottery-container {
	position: relative;
	z-index: 999;

	width: 619px;
	height: 1101.8px;
	/* 适配手机端，可按需调整 */
	margin: 0 auto;

	/* 主背景图 */
	background-size: 100% 100%;
	padding: 10px;
	font-family: 'SourceHanSansCN-Heavy', sans-serif;
	color: #333;
	position: relative;
	/* 用于灯笼绝对定位 */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 230px;
}

.header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.logo {
	width: 80px;
	height: auto;
	margin-right: 10px;
}

.ssq-logo {
	width: 60px;
	height: auto;
	margin-left: 10px;
}

.header h1 {
	font-size: 24px;
	color: #c1272d;
}

.lottery-box,
.draw-numbers,
.sales,
.next-prize-pool,
.claim-deadline {
	color: white;
	padding: 10px;
	border-radius: 4px;
	color: #c1272d;
}

.lottery-box h2,
.draw-numbers h2,
.sales h2,
.next-prize-pool h2,
.claim-deadline h2 {
	text-align: center;
	margin-bottom: 10px;
}

.claim-deadline {
	color: #774d7f;
	font-size: 14px;
	font-weight: bold;
	line-height: 10px;

	p {
		width: 100%;
		display: flex;
		text-align: center;
		justify-content: center;
		margin-bottom: 10px;
	}
}

.numbers {
	color: #774d7f;
	margin-top: -9px;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	gap: 28px;

	// border: 1px solid #c40002;
	// /* 表格、表头和单元格的边框 */
	// border-collapse: collapse;
	// /* 合并边框 */
}

.issue {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #c1272d;
	margin-top: 50px;
	margin-bottom: 10px;

	display: flex;
	gap: 30px;
}

.issue_title {
	color: #693893;
	font-size: 15px;
	font-weight: bold;
	display: flex;
	align-items: center;

	text {
		color: #7e4d7c;
		font-size: 20px;
		font-weight: 900;
	}
}

.sales-amount {
	margin-top: -10px;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	color: #792e97;
}

.pool-amount {
	text-align: center;
	font-size: 34px;
	font-weight: bold;
	color: #774d7f;
}

.prize-result {
	margin-bottom: 20px;
	margin-top: 7px;
	width: 420px;
}

.prize-result h2 {
	text-align: center;
	font-size: 20px;
	color: #c1272d;
	margin-bottom: 10px;
}

.prize-result table {
	width: 100%;
	border-collapse: collapse;
	color: #c1272d;
	font-weight: bold;
}

.prize-result th,
.prize-result td {
	// border: 1px solid #c1272d;
	padding: 6px;
	text-align: center;
}

.prize-result th {
	background-color: #c1272d;
	color: white;
}

.footer {
	text-align: center;
	margin-top: 20px;
	color: #c1272d;
	font-weight: bold;
}

table,
th,
td {
	border: 1px solid #792e97;
	/* 表格、表头和单元格的边框 */
	border-collapse: collapse;
	/* 合并边框 */
}

.num_td {
	// display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 17px;
	font-weight: 800;
	height: 25px;
}

.item_big_title {
	background-color: #792e95;
	width: 420px;
	color: white;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	border-start-start-radius: 100px;
	border-start-end-radius: 100px;
	padding: 5px 0;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 3px;
}

.prize_table {
	tr {
		td {
			color: #774d7f;
		}
	}
}

.table_big_title {
	font-size: 17zpx;
	font-weight: bold;
}

.big_footer {
	font-size: 20px;
	font-weight: bold;
	color: #000;
	margin-top: 8px;
}
</style>
